<template>
	<div class="page-wrapper">
		<el-form :inline="true">
            <!-- <el-form-item>
				<el-input v-model="state.queryForm.name" placeholder="部门名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle()" v-if="hasRule('admin/product/type/index/add')">{{ $t('add') }}</el-button>
			</el-form-item>
		</el-form>
		<el-table :key="tableKey" v-loading="state.dataListLoading" :data="dataList" row-key="id" border width="100%" height="100%" :default-expand-all="isExed">
			<el-table-column prop="name" label="名称" header-align="center">
                <template #header>
                    <div class="w100 textC rel">
                        <div class="abs-l">
                            <el-button type="primary" @click="openandclose" size="small" :icon="Sort" style="padding: 3px 11px;height: 22px;">{{ isExed?$t('cm.c5'):$t('cm.c6') }}</el-button>
                        </div>
                        {{ $t('cm.c1') }}
                    </div>
                </template>
            </el-table-column>
			<el-table-column prop="pid" :label="$t('cm.c2')" header-align="center" align="center">
                <template #default="scope">
					<span v-if="scope.row.pid == 0"></span>
					<span v-else-if="scope.row.parent">{{scope.row.parent.name}}</span>
				</template>
            </el-table-column>
			<el-table-column prop="sort" :label="$t('cm.c3')" header-align="center" align="center"></el-table-column>
			<el-table-column prop="remark" :label="$t('cm.p10')" header-align="center" align="center"></el-table-column>
			<!-- <el-table-column prop="status" label="状态" header-align="center" align="center">
                <template #default="scope">
					<span @click.stop="handleSwitchChange(scope.row)">
                        <el-switch
                            v-model="scope.row.status"
                            inline-prompt
                            :active-value="1"
                            :inactive-value="0"
                            active-text="启用"
                            inactive-text="禁用"/>
                    </span>
				</template>
            </el-table-column> -->
			<el-table-column :label="$t('cm.p11')" fixed="right" header-align="center" align="right" width="300">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id, true, scope.row.name)" v-if="hasRule('admin/product/type/index/add') && (scope.row.canAdd)">{{ $t('cm.c4') }}</el-button>
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id, false, scope.row.parent?.name||'')" v-if="hasRule('admin/product/type/index/update')">{{ $t('edit') }}</el-button>
					<el-button type="danger" link @click="deleteHandle(scope.row.id)" v-if="hasRule('admin/product/type/index/delete')">{{ $t('delete') }}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, computed } from 'vue'
import AddOrUpdate from './add-or-update.vue'
import { IHooksOptions } from '@/hooks/interface'
import { useProductTypeAddApi } from '@/api/api'
import { ElMessage } from 'element-plus'
import { Sort } from '@element-plus/icons-vue'
import { hasRule } from '@/utils/tool'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const state: IHooksOptions = reactive({
	dataListUrl: '/api/strator/product/type/tree/all',
	deleteUrl: '/api/strator/product/type/delete',
    dataAll: true,
	isPage: false,
    page: 1,
    per_page: 9999,
})
const tableKey = ref('');
const isExed = ref(true);
const openandclose = () => {
    tableKey.value = +new Date();
    isExed.value = !isExed.value;
}
const dataList = computed(() => {
    return createTreeData(state.dataList);
})
const createTreeData = (list: any[]|undefined) => {
    const treelist: any = list?.filter(i => i.pid == 0);
    treelist?.forEach((item) => {
        item.canAdd = true;
        if (item.children?.length) {
            item.children.forEach(e => {
                e.canAdd = true;
            })
        }
    })
    return treelist;
}
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: Number, isOne?: any, name?: any) => {
	addOrUpdateRef.value.init(id, isOne, name)
}
const handleSwitchChange = (row: any) => {
    useProductTypeAddApi({
        id: row.id,
        pid: row.pid,
        name: row.name,
        sort: row.sort,
        status: row.status,
    }).then((result) => {
        ElMessage.success('修改成功')
    }).catch((err) => {
        
    });
}

const { getDataList, deleteHandle } = useCrud(state,t)
</script>
